<template>
  <ul id="maptools">
    <li @click="clickHande(1)">行政区导航</li>
    <li @click="clickHande(2)">目录树管理</li>
    <li class="maptools-item" @click="handleMapToolsitemClick" id="maptree">目录树管理</li>
    <li></li>
        <el-dropdown trigger="click" class="maptools-item" @command="handleCommand">
            <span class="el-dropdown-link">地图测量<i class="el-icon-arrow-down el-icon--right"></i> </span>
            <el-dropdown-menu slot="dropdown">
                <el-dropdown-item icon="el-icon-plus" command="distance">距离测量</el-dropdown-item>
                <el-dropdown-item icon="el-icon-circle-plus" command="area">面积测量</el-dropdown-item>
                <el-dropdown-item icon="el-icon-edit" command="diymeasurement_distance"
                    >自定义测量(长度)</el-dropdown-item
                >
                <el-dropdown-item icon="el-icon-edit" command="diymeasurement_area">自定义测量(面积)</el-dropdown-item>
            </el-dropdown-menu>
        </el-dropdown>
        <el-dropdown trigger="click" class="maptools-item" @command="handleCommand">
            <span class="el-dropdown-link">更多功能<i class="el-icon-arrow-down el-icon--right"></i> </span>
            <el-dropdown-menu slot="dropdown">
                <el-dropdown-item icon="el-icon-search" command="spacequery">空间查询</el-dropdown-item>
                <el-dropdown-item icon="el-icon-film" command="morescreen">多屏对比</el-dropdown-item>
                <el-dropdown-item icon="el-icon-reading" command="swipanalyst">卷帘分析</el-dropdown-item>
                <el-dropdown-item icon="el-icon-picture-outline" command="printmap">地图打印</el-dropdown-item>
                <el-dropdown-item icon="el-icon-view" command="openPopup">开启图层弹窗</el-dropdown-item>
            </el-dropdown-menu>
        </el-dropdown>
    <li @click="clickHande(5)">清屏</li>
  </ul>
</template>

<script setup>
// 目录树管理
   const emit = defineEmits(["openTreeList"]); // 必须单独拉出来写
let clickHande = (index) => {
  console.log('当前点击', index)
  switch (index) {
    case 1:
      break
    case 2:
      emit("openTreeList");
      break
    case 3:
      break
    case 4:
      break
    case 5:
      break
  }
}
</script>

<style lang="scss" scoped>
#maptools {
  list-style: none;
  position: absolute;
  top: 1%;
  right: 1%;
  background: #fff;
  text-align: center;
  li {
    padding: 10px;
    cursor: pointer;
    float: left;
  }
  li:hover {
    color: red;
  }
}
</style>